{extend name="public/container"}
{block name="content"}
<div id="myApp" v-cloak>
    <div class="padding-10">
        <div class="douxue-filter flex flex-between" style="margin-bottom:20px;">
            <el-form :inline="true" :model="where" size="mini" class="flex">
                <div class="flex flex-between">
                    <el-form-item label="">
                        <el-select v-model="where.status" size="small" clearable placeholder="当前状态">
                            <el-option label="正常" value="1"></el-option>
                            <el-option label="禁用" value="2"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="">
                        <el-date-picker
                            v-model="where.last_time"
                            type="date"
                            size="small"
                            value-format='yyyy-MM-dd'
                            placeholder="订单日期">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="">
                        <el-select v-model="where.pid" size="small" clearable placeholder="上级推广人">
                            <el-option
                                v-for="item in userRows"
                                :key="item.id"
                                :label="item.nickname"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-input size="small" v-model="where.keyword" placeholder="关键字搜索">
                            <el-button slot="append" size="small" type="primary" @click="doLoadRows(1)" icon="el-icon-search"></el-button>
                        </el-input>
                    </el-form-item>
                </div>
            </el-form>
        </div>

        <div class="">
            <el-table
                :data="rows"
                style="width: 100%"
                size="mini">
                <el-table-column
                    prop="id"
                    label="ID"
                    width="60"
                    align="left">
                </el-table-column>

                <el-table-column
                    prop="nickname"
                    label="用户名"
                    width="120"
                    align="left">
                </el-table-column>

                <el-table-column
                    prop="organ_name"
                    label="所属机构名称"
                    width="120"
                    align="center" v-if="isAdmin">
                </el-table-column>

                <el-table-column
                    prop="contact_info"
                    label="访问日期">
                    <template slot-scope="scope">
                        <div>首次：{{scope.row.add_time || '-'}}</div>
                        <div>最近：{{scope.row.last_time || '-'}}</div>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="pnickname"
                    label="上级推广人"
                    width="120"
                    align="left">
                </el-table-column>

                <el-table-column
                    prop="balance"
                    label="余额"
                    width="120"
                    align="left">
                </el-table-column>

                <el-table-column
                    prop="withdrawed_amount"
                    label="已提现"
                    width="120"
                    align="left">
                </el-table-column>

                <el-table-column
                    label="当前状态"
                    width="100"
                    align="left">
                    <template slot-scope="scope">
                        <el-switch
                            v-model="scope.row.status"
                            active-color="#ff6a6c"
                            inactive-color="#999"
                            :active-value="1"
                            :inactive-value="0"
                            @change="doSetStatus(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>

                <el-table-column
                    label=""
                    width="190"
                    align="left">
                    <template slot-scope="scope">
                        <el-link type="primary" size="mini" :underline="false" @click="doModify(scope.row.id)">编辑</el-link>
                        <el-link type="danger" size="mini" :underline="false" @click="doDelete(scope.row.id)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    hide-on-single-page
                    size="mini"
                    background
                    layout="prev, pager, next"
                    :total="rowsCount"
                    :page-size="limit"
                    @current-change="doLoadRows">
                </el-pagination>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    var my = new Vue({
        el: "#myApp",
        data: {
            pn: 1,
            limit: 10,
            rowsCount: 0,
            rows: [],
            where:{
                role_id:"",
                status:"",
                last_time:"",
                nickname:"",
                mobile:'',
                pid:'',
                org_id:'',
            },
            userRows:[],
            organs:[],
            isAdmin:false,
        },
        methods: {
            doLoadRows () {
                this.where.last_time=this.where.last_time?this.where.last_time:''
                url=Url({a:'get_list' , q:{page:this.pn,role_id:this.where.role_id,status:this.where.status,last_time:this.where.last_time,nickname:this.where.nickname,mobile:this.where.mobile,pid:this.where.pid,org_id:this.where.org_id}})
                axios.get(url)
                    .then(res => {
                        this.rows = res.data.data.data
                        this.rowsCount = res.data.data.total
                    })
            },
            doGetUserList(){
                url=Url({a:'getUserList'})
                axios.get(url)
                    .then(res => {
                    this.userRows=res.data.data
                    })
            },
            doGetOrganList(){
                url=Url({a:'getOrganList'})
                axios.get(url)
                    .then(res => {
                    this.organs=res.data.data.organs
                    this.isAdmin=res.data.data.isAdmin
                    })
            },
            doSetStatus (row) {
                axios.get('{:Url('updateUserStatus')}?status=' + row.status + '&id=' + row.id)
                    .then(res => {
                        this.$message({
                            message: res.data.msg,
                            type: res.data.code === 200 ? 'success' : 'error',
                            onClose: _ => {
                                if (res.data.code !== 0) {
                                    this.doLoadRows()
                                }
                            }
                        })
                    })
            },
            divideSetShow(org){
                this.divideOrgname=org.organ_name;
                this.divideValue=org.platform_divide
                this.showChangeDivide=true;
                this.editOrgId=org.id
                console.log(name)
            },
            closeModal(){
                this.divideValue=0;
                this.divideOrgname="";
                this.showChangeDivide=false;
                this.editOrgId=0
            },
            successModal(){
                
                axios.post(Url({a:'updateDivde' , q:{id:this.editOrgId}}),{divideValue:this.divideValue}).then(res => {
                        this.$message({
                            message: res.data.msg,
                            type: res.data.code === 200 ? 'success' : 'error',
                        })
                        this.doLoadRows ()
                    }).catch(_ => {
                        this.$message({
                            message: '更新失败',
                            type: 'error'
                        })
                    })
                this.closeModal();
            },
            doModify (id) {
                location.href = '{:Url('edit')}?id=' + id
            },
            doDelete (id) {
                this.$confirm('确认删除该条记录?').then(_ => {
                    axios.get(Url({a:'delete' , q:{id:id}})).then(res => {
                        this.$message({
                            message: res.data.msg,
                            type: res.data.code === 200 ? 'success' : 'error',
                        })
                    }).catch(_ => {
                        this.$message({
                            message: '删除失败',
                            type: 'error'
                        })
                    })

                    return this.doLoadRows();
                }).catch(_ => {})
            }
        },
        mounted(){
            this.doLoadRows()
            this.doGetUserList()
            this.doGetOrganList()
        }
    })
</script>
{/block}